<!--  -->
<template>
	<el-table size="small" :data="data || []" style="width: 92%; margin-left: 8%">
		<el-table-column prop="name" label="零件名称" />
		<el-table-column prop="code" label="零件编号" />
		<el-table-column prop="bom" label="BOM" />
		<el-table-column prop="featureKey" label="技术特性-参数" align="center" />
		<el-table-column prop="featureValue" label="技术特性-value" align="center" />
		<el-table-column label="" align="center">
			<template #default="props">
				<el-button
					type="success"
					size="small"
					circle
					:icon="Edit"
					@click="handleEditComponentPart(props.row)"
				></el-button>
				<el-button type="danger" size="small" circle :icon="Delete"></el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-pagination
		:current-page="pageData.currentPage"
		:page-size="pageData.pageSize"
		:small="true"
		:disabled="false"
		:background="true"
		layout="total, prev, pager, next"
		:total="data.length"
		@size-change="handlePageSizeChange"
		@current-change="handlePageCurrentChange"
		style="justify-content: flex-end"
		class="pagination-part"
	/>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { Check, Delete, Edit, Message, Search, Star, Plus } from '@element-plus/icons-vue';

const props = defineProps({
	data: {
		type: Array,
		default: [],
	},
});

const emits = defineEmits(['editComponentPart']);

const pageData = reactive({
	currentPage: 1,
	pageSize: 10,
});

/**
 * 编辑组件零件
 * @param rowData
 */
const handleEditComponentPart = rowData => {
	emits('editComponentPart', rowData);
};

const handlePageSizeChange = () => {};

const handlePageCurrentChange = () => {};
</script>
<style lang="scss" scoped>
.pagination-part {
	&::before {
		content: '零件';
		font-size: 12px;
	}
}
</style>
